<template>
  <v-app>
    <!--    原：<v-sheet color="#F5F4F2">，去掉  color="#F5F4F2"  -->
    <v-sheet>
      <v-sheet color="transparent" class="pt-[72px]">
        <banner-image
          :HeadImage="swiperData.imgs[0] ? swiperData.imgs[0].url : ''"
          :HeadLabel="swiperData.name"
          :SubLabel="swiperData.desc"
        />
      </v-sheet>
      <div class="d-flex justify-center py-16">
        <v-sheet color="transparent" class="w-[600px] pa-8">
          <!-- 卡片式表单容器 -->
          <v-card elevation="5" class="rounded-xl overflow-hidden">
            <!-- 表单头部 -->
            <v-card-title class="bg-gradient-to-r from-blue-600 to-blue-400 text-white py-6">
              <h2 class="text-2xl font-bold">Contact Inquiry Form</h2>
            </v-card-title>
            
            <!-- 表单内容区 -->
            <v-card-text class="px-8 py-6">
              <v-form>
                <!-- 查询类型 -->
                <v-row class="mb-6">
                  <v-col>
                    <v-radio-group 
                      v-model="dealerRegisterForm.inquiryType" 
                      label="Inquiry Type" 
                      required
                      class="elevation-0"
                    >
                      <v-radio 
                        label="Dealer" 
                        value="dealer" 
                        class="mb-2"
                        color="blue"
                      />
                      <v-radio 
                        label="Distributor" 
                        value="distributor" 
                        class="mb-2"
                        color="blue"
                      />
                      <v-radio 
                        label="Athlete or Ambassador" 
                        value="athlete" 
                        class="mb-2"
                        color="blue"
                      />
                      <v-radio 
                        label="Industry/Bike Shop Employee Pricing" 
                        value="industry"
                        color="blue"
                      />
                    </v-radio-group>
                  </v-col>
                </v-row>

                <!-- 姓名 -->
                <v-row class="mb-6">
                  <v-col cols="12" md="6">
                    <v-text-field 
                      label="First Name" 
                      v-model="dealerRegisterForm.firstName" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-text-field 
                      label="Last Name" 
                      v-model="dealerRegisterForm.lastName" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                </v-row>

                <!-- 邮箱 -->
                <v-row class="mb-6">
                  <v-col>
                    <v-text-field 
                      label="Email" 
                      v-model="dealerRegisterForm.email" 
                      type="email" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                      hint="example@example.com"
                    />
                  </v-col>
                </v-row>

                <!-- 电话号码 -->
                <v-row class="mb-6">
                  <v-col cols="12" md="3">
                    <v-text-field 
                      label="Area Code" 
                      v-model="dealerRegisterForm.areaCode" 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                  <v-col cols="12" md="9">
                    <v-text-field 
                      label="Phone Number" 
                      v-model="dealerRegisterForm.phoneNumber" 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                </v-row>

                <!-- 公司名称 -->
                <v-row class="mb-6">
                  <v-col>
                    <v-text-field 
                      label="Business Name" 
                      v-model="dealerRegisterForm.businessName" 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                      hint="If applicable"
                    />
                  </v-col>
                </v-row>

                <!-- 地址 -->
                <v-row class="mb-6">
                  <v-col>
                    <v-text-field 
                      label="Address" 
                      v-model="dealerRegisterForm.streetAddress" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                      hint="Street address, P.O. box, company name, c/o"
                    />
                  </v-col>
                </v-row>
                <v-row class="mb-6">
                  <v-col>
                    <v-text-field 
                      label="Apartment, suite, unit, building, floor, etc." 
                      v-model="dealerRegisterForm.apartmentInfo" 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                </v-row>
                <v-row class="mb-6">
                  <v-col cols="12" md="6">
                    <v-text-field 
                      label="City" 
                      v-model="dealerRegisterForm.city" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-text-field 
                      label="State" 
                      v-model="dealerRegisterForm.state" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                </v-row>
                <v-row class="mb-6">
                  <v-col cols="12" md="6">
                    <v-text-field 
                      label="Zip/Postal Code" 
                      v-model="dealerRegisterForm.zipCode" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-select 
                      label="Country" 
                      v-model="dealerRegisterForm.country" 
                      required 
                      :items="countries" 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                    />
                  </v-col>
                </v-row>

                <!-- 网站 -->
                <v-row class="mb-6">
                  <v-col>
                    <v-text-field 
                      label="Website" 
                      v-model="dealerRegisterForm.website" 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                      hint="If applicable"
                    />
                  </v-col>
                </v-row>

                <!-- 查询备注 -->
                <v-row class="mb-6">
                  <v-col>
                    <v-textarea 
                      label="Inquiry Notes" 
                      v-model="dealerRegisterForm.inquiryNotes" 
                      required 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                      rows="4"
                    />
                  </v-col>
                </v-row>

                <!-- 文件上传 -->
                <v-row class="mb-8">
                  <v-col>
                    <v-file-input 
                      label="Supporting Document(s)" 
                      v-model="dealerRegisterForm.supportingDocuments" 
                      variant="outlined"
                      color="blue"
                      density="compact"
                      class="rounded-lg"
                      accept=".pdf,.doc,.docx,.jpg,.png"
                    />
                  </v-col>
                </v-row>

                <!-- 提交按钮 -->
                <v-row justify="center">
                  <v-col cols="12" sm="6" md="4">
                    <v-btn 
                      color="blue" 
                      type="submit" 
                      class="w-full py-3 rounded-lg text-white text-lg font-medium"
                      elevation="3"
                      hover
                    >
                      Submit Inquiry
                    </v-btn>
                  </v-col>
                </v-row>
              </v-form>
            </v-card-text>
          </v-card>
        </v-sheet>
      </div>
    </v-sheet>
  </v-app>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const { $axios } = useNuxtApp();

const dealerRegisterForm = ref<any>({
  inquiryType: 'dealer', // 默认选中“Dealer”
  firstName: '',
  lastName: '',
  email: '',
  areaCode: '',
  phoneNumber: '',
  businessName: '',
  streetAddress: '',
  apartmentInfo: '',
  city: '',
  state: '',
  zipCode: '',
  country: '',
  countries: ['Please Select', 'USA', 'Canada', 'UK', 'Australia'], // 示例国家列表，可根据业务扩展
  website: '',
  inquiryNotes: '',
  supportingDocuments: null, // 存储上传的文件
});

const swiperData = ref<any>({ imgs: [], name: "", desc: "" });

// 首页数据获取
const fetchSwiperData = async () => {
  try {
    // GET请求
    const { isSuccess, data } = await $axios.get<any>(
      "/getSwiperByType?type=5"
    );

    if (isSuccess) {
      swiperData.value = data;
    }

    console.log("获取数据成功 => ", swiperData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

onMounted(() => {
  // console.log("videos页面接受路由参数query", routeData)
  fetchSwiperData();
});
</script>

<style scoped>
/* 自定义样式增强视觉效果 */
.v-card {
  border-radius: 16px !important;
  overflow: hidden;
}

.v-card-title {
  padding-left: 2rem !important;
}

.v-text-field, .v-select, .v-file-input {
  --v-field-padding-top: 1rem !important;
  --v-field-padding-bottom: 1rem !important;
}

.v-btn {
  transition: all 0.3s ease;
}

.v-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
}

.v-radio {
  padding: 0.5rem 0;
}
</style>